<template>
  <div>
    <el-card class="filter-card">
      <div slot="header">
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- /面包屑路径导航 -->
      </div>
      <!-- 数据筛选表单 -->
      <el-form ref="form" :model="form" label-width="40px" size="mini">
        <el-form-item label="状态">
          <!-- 接口要求的是01234 status汉字 
          1.传递给后端接口的数据为 null 01234
          2.保证视图上的文本显示正确
          不加: 识别为字符串 加上:就会识别成对应的数据类型
          -->
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="form.channelId" placeholder="请选择频道">
            <el-option :label="item.name" :value="item.id" v-for="item in channels" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 最终产出的值是一个包含了开始时间和结束时间的数组 
        通过value-format格式化成后端接口需要的格式
        -->
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :default-time="['12:00:00']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- /数据筛选表单 -->
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">根据筛选条件共查询到 {{total_count}} 条结果：</div>
      <!-- 数据列表 -->
      <!-- el-table上的data属性 控制了要渲染的实际数据  这个是固定的 -->
      <!-- 每一个 el-table-column 代表一列 label代表表头文字  prop代表要渲染的数据字段名称-->
      <!-- 整个表格是按照列进行渲染的 -->
      <el-table :data="tableData" stripe style="width: 100%" class="list-table" size="mini">
        <el-table-column label="封面" width="180">
          <!-- 我们需要的数据不能直接通过属性名获取到  需要进入到对象内部拿内部的值
          通过一个作用域插槽 slot-scope="scope" scope.row 代表表格绑定数据列表中的每一项
          当使用作用域插槽的时候 不再需要使用prop属性
          -->
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.cover.images[0]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <!-- 对应关系依照的就是接口文档
            不同的状态码渲染不同的视图  使用v-if v-else-if 完成-->
            <el-tag v-if="scope.row.status===0">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              circle
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              circle
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /数据列表 -->
      <!-- 列表分页 -->
      <!-- layout:代表当前分页组件的结构  prev 上一页  pager 数字分页  next 下一页
            total 代表数据的总量一般来源于后端接口  分页逻辑： total / pageSize = pageNum
            page-size：每页显示条目个数，支持 .sync 修饰符 默认值 10  自定义之后默认值会被覆盖
      -->
      <el-pagination
        class="pageCont"
        :page-size="pageSize"
        layout="prev, pager, next"
        background
        :total="total_count"
        :small="true"
        @current-change="pageChange"
      ></el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
import { getList, delArticle, getChannels } from '@/api/article'

export default {
  data() {
    return {
      form: {
        channelId: null,//状态id
        status: null,//文章状态
        begin_pubdate: '',//开始日期
        end_pubdate: '',//结束日期
        date: null
      },
      channels: [],//所有的频道
      tableData: [],//文章列表数据
      total_count: 0,//当前条件下可以获取到的文章总数
      curPage: 1,//当前请求的是第几页的数据
      pageSize: 10

    }
  },
  methods: {
    doSearch() {
      this.hGetList()
    },
    hGetList() {
      //获取文章列表
      //组件产出的值类型和提交给后端的类型不一致怎么办？[time,time]
      //null.name  null[0]
      if (this.form.date === null) {
        this.form.begin_pubdate = ''
        this.form.end_pubdate = ''
      } else {
        this.form.begin_pubdate = this.form.date[0]
        this.form.end_pubdate = this.form.date[1]
      }
      getList({
        page: this.curPage,
        status: this.form.status,
        channel_id: this.form.channelId,
        begin_pubdate: this.form.begin_pubdate,
        end_pubdate: this.form.end_pubdate
      }).then((res) => {
        // console.log(res)
        // console.dir(res)
        //绑定列表数据
        this.tableData = res.data.data.results
        //绑定当前条件下的文章总数
        this.total_count = res.data.data.total_count
      })
    },
    //编辑文章
    handleEdit(index, row) {
      //index - > scope.$index  从0开始代表当前操作的是数据的第几项
      //row - > scope.row  代表的数据list中的每一项{}
      // console.log(index, row)
      this.$router.push({
        path: '/editArticle',
        query: {
          id: row.id
        }
      })
    },
    //删除文章
    handleDelete(index, row) {
      console.log(index, row)
      //BigNumber不能直接用  需要调用toString
      let id = row.id.toString()
      //将处理过的正确id传入接口
      delArticle(id).then(res => {
        //删除以后重新渲染文章列表
        this.hGetList()
      }).catch(error => {
        console.log(error)
      })
    },
    pageChange(page) {
      //当前页发生变化时  将当前页当成参数传递给后端拿到当前页对应的数据
      // console.log('页码变了' + page)
      this.curPage = page
      this.hGetList()
    },
    hGetChannels() {
      //获取所有的文章频道
      getChannels().then(res => {
        // console.log(res)
        this.channels = res.data.data.channels
      })
    }
  },
  mounted() {
    //发起对频道数据的请求
    this.hGetChannels()
    this.hGetList()
  }
}
</script>
<style lang="less">
.box-card {
  margin-top: 20px;
}
.pageCont {
  margin-top: 10px;
}
</style>